import React, {Fragment} from 'react';
import {Card, Modal, Space} from "antd";
import "@/css/workflow.less"
import ArrowLine from "@/pages/WorkFlowDesigner/Line/ArrowLine";
import {CheckCircleTwoTone, ClockCircleTwoTone, CloseCircleTwoTone} from "@ant-design/icons";
import {DataType} from "@/pages/example/ApprovalList";
import {EndNode} from "@/pages/WorkFlowDesigner/Node/EndNode";

interface IViewProps {
    open: boolean;
    setOpen: (open: boolean) => void
    data: DataType;
}

interface IShowProps {
    status:number;
    approver: string;
}

const AgreeCard:React.FC<IShowProps> = (props: IShowProps) => {
    const {  approver } = props

    return (
        <Card title={approver} extra={<CheckCircleTwoTone twoToneColor="#52c41a"/>} style={{width: 200}}>
            已同意

        </Card>
    )

}

const RefuseCard = (props: IShowProps) => {
    const {  approver } = props
  return (
      <Card title={approver} extra={<CloseCircleTwoTone twoToneColor="#FF0000"/>} style={{width: 200}}>
          已拒绝
      </Card>
  )
}

const WaitCart = (props: IShowProps) => {
    const {  approver } = props

    return (
        <Card title={approver} extra={<ClockCircleTwoTone/>} style={{width: 200}}>
            待审批
        </Card>
    )

}


const ShowCard = (props: IShowProps) => {
    const { status } = props
    switch (status) {
        case 2:
            return RefuseCard(props)
        case 1:
            return AgreeCard(props)
        default:
            return WaitCart(props)
    }
}


// 流程进度
const Approval = (props:IViewProps) => {

    const {open, setOpen, data} = props;
    const {approvalData} = data;

    const ResultCard = () =>(
        <div>
            {/*TODO 这里存在bug, 当status或者username不存在时,页面就会崩掉, 采用条件渲染*/}
            <ShowCard status={approvalData[0]?.status} approver={approvalData[0]?.username[0]}/>
            <ArrowLine/>
            <ShowCard status={approvalData[1]?.status} approver={approvalData[1]?.username[0]}/>
            <ArrowLine/>
            <ShowCard status={approvalData[2]?.status} approver={approvalData[2]?.username[0]}/>
            <ArrowLine/>
            <EndNode/>

        </div>
    )



    const handleOk = () => {
        setOpen(false);
    };

    const handleCancel = () => {
        setOpen(false);
    };

    return (
        <Fragment>
            <Modal title="请假流程"
                   open={open}
                   onOk={handleOk}
                   onCancel={handleCancel}>
                <div className="col-flex-container flex-center">
                    <Space direction="vertical" size={0}>
                        <ResultCard/>

                    </Space>
                    <div className="row-flex-container" style={{marginTop: 10}}>

                    </div>
                </div>
            </Modal>

        </Fragment>
    )
}

export default Approval;
